<template>
  <van-tabbar v-model="active"
              active-color="#ee0a24"
              inactive-color="#000"
              @change="changeTab">
    <van-tabbar-item>
      <!-- 使用具名插槽填坑 -->
      <van-icon class="iconfont icon-dianying"
                slot="icon"
                size="1.3rem"></van-icon>
      <span>电影</span>
    </van-tabbar-item>
    <van-tabbar-item>
      <van-icon class="iconfont icon-yingyuan"
                slot="icon"
                size="1.3rem"></van-icon>
      <span>影院</span>
    </van-tabbar-item>
    <van-tabbar-item>
      <van-icon class="iconfont icon-zixun"
                slot="icon"
                size="1.3rem"></van-icon>
      <span>资讯</span>
    </van-tabbar-item>
    <van-tabbar-item>
      <van-icon class="iconfont icon-wode"
                slot="icon"
                size="1.3rem"></van-icon>
      <span>我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>


export default {
  data () {
    return {
      // 默认选中第一个选项卡
      active: 0,
      // 定义一个地址数组
      url: ["/films/nowPlaying", "/cinemas", "/infomations", "/center"],
    };
  },
  // created周期解决刷新导致的active归零的情况
  created () {
    // 获取路由信息
    let path = this.$route.path;
    let index = this.url.indexOf(path);
    this.active = index > -1 ? index : 0;
  },
  methods: {
    /**
     * index: 对应菜单的下标
     */
    changeTab (index) {
      // let url = "";
      // switch (index) {
      //     case 0:
      //         url = "/films/nowPlaying";
      //         break;
      //     case 1:
      //         url = "/cinemas";
      //         break;
      //     case 2:
      //         url = "/infomations";
      //         break;
      //     case 3:
      //         url = "/center";
      //         break;
      // }
      // this.$router.push(url);
      this.$router.push(this.url[index]);
    },
  },
};
</script>

<style scoped></style>
